0.25.0 • Published 30 days ago
@k8slens/lds-tips v0.25.0
Lens Design System – React Tips component
Documentation
Browse the documentation at lensapp.github.io/lens-design-system.
Usage in React apps
- run
npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-tips
- import
@k8slens/lds-tokens/lib/es/font-imports.css
in your React app to include fonts - import
@k8slens/lds/lib/es/index.css
in your React app to include core styles - import
@k8slens/lds-tips/lib/es/index.css
in your React app to include Tips styles - Use in a component:
import { Tips } from "@k8slens/lds-tips";
import tipStore from "./path-to-my/tip-store";
export const Component = () => (
<Tips
tours={tipStore.tours}
setNextStepNumber={tipStore.setNextStepNumber}
getActiveStep={tipStore.getActiveStep}
setSkipAll={tipStore.setSkipAll}
skipped={tipStore.skipAll}
/>
);
Example using MobX
Tours
// tours.ts
import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";
export default const tours: Array<Tour> = [
{
id: "tour-1",
steps: [
{
id: "first-tip",
selector: "#target-element-1",
theme: "important",
content: (
<>
<h3>This is the first tip</h3>
<p>Tip Contents</p>
</>
),
},
{
id: "second-tip",
selector: "#target-element-2",
theme: "important",
content: (
<>
<h3>This is the second tip</h3>
<p>Another content</p>
</>
),
},
],
}
]
TipStore
// tips-store.ts
import { action, makeObservable, observable, toJS } from "mobx";
import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";
import tours from "./tours";
type ActiveSteps = { [key: string]: number };
type TipStoreModel = {
skipAll: TipsProps["skipAll"];
activeSteps: ActiveSteps;
};
export class TipStore {
@observable
store: TipStoreModel = {
skipAll: false,
activeSteps: {}
};
tours: Array<Tour> = tours;
constructor() {
super();
makeObservable(this);
}
@action
setSkipAll: TipsProps["setSkipAll"] = () => {
this.store.skipAll = true;
};
@action
setNextStepNumber: TipsProps["setNextStepNumber"] = (tourId: string) => {
let nextStep = 1;
if (typeof this.store.activeSteps[tourId] === "number") {
nextStep += this.store.activeSteps[tourId];
};
this.store.activeSteps = {
...this.store.activeSteps,
[tourId]: nextStep
};
return nextStep;
};
getActiveStep: TipsProps["getActiveStep"] = (tourId: string) => {
return this.store.activeSteps[tourId] || 0;
};
}
Component
// Component.tsx
import React from "react";
import { observer } from "mobx-react";
import { Tips } from "@k8slens/lds-tips";
import { TipStore } from "./TipStore";
interface Props {
tipStore: TipStore | null;
}
export const Component = observer(({ tipStore }: Props) => {
if (!tipStore) {
return null;
}
return (
<Tips
tours={tipStore.tours}
setNextStepNumber={tipStore.setNextStepNumber}
getActiveStep={tipStore.getActiveStep}
setSkipAll={tipStore.setSkipAll}
skipped={tipStore.store.skipAll}
/>
);
});
0.25.0
30 days ago
0.24.4
1 month ago
0.24.3
2 months ago
0.24.2
2 months ago
0.24.1
2 months ago
0.24.0
2 months ago
0.23.0
2 months ago
0.22.0
3 months ago
0.21.0
3 months ago
0.20.0
5 months ago
0.9.3
8 months ago
0.19.0
6 months ago
0.11.0
8 months ago
0.10.1
8 months ago
0.12.0
7 months ago
0.11.1
8 months ago
0.13.0
7 months ago
0.14.0
7 months ago
0.15.0
7 months ago
0.14.1
7 months ago
0.16.0
6 months ago
0.17.0
6 months ago
0.16.1
6 months ago
0.18.0
6 months ago
0.10.0
8 months ago
0.9.0
8 months ago
0.8.1
8 months ago
0.8.0
8 months ago
0.9.2
8 months ago
0.9.1
8 months ago
0.8.2
8 months ago
0.7.0
9 months ago
0.6.0
9 months ago
0.5.1
11 months ago
0.3.0
1 year ago
0.5.0
12 months ago
0.4.1
12 months ago
0.4.0
12 months ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago