@salutejs/plasma-new-hope 0.78.0-canary.1194.8928682263.0 → 0.78.0-canary.1195.8924860991.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.styles.js +1 -0
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Combobox/hooks/useFocusController.js +0 -1
- package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/cjs/components/Drawer/Drawer.js +1 -0
- package/cjs/components/Drawer/Drawer.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +24 -0
- package/cjs/components/IconButton/IconButton.js +50 -0
- package/cjs/components/IconButton/IconButton.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles.js +16 -0
- package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/cjs/components/IconButton/IconButton.tokens.js +32 -0
- package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
- package/cjs/components/TextField/TextField.js +2 -6
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/index.css +2 -25
- package/cjs/index.js +5 -14
- package/cjs/index.js.map +1 -1
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Button/Button.styles.js +1 -0
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Combobox/hooks/useFocusController.js +0 -1
- package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/es/components/Drawer/Drawer.js +1 -0
- package/es/components/Drawer/Drawer.js.map +1 -1
- package/es/components/IconButton/IconButton.css +24 -0
- package/es/components/IconButton/IconButton.js +45 -0
- package/es/components/IconButton/IconButton.js.map +1 -0
- package/es/components/IconButton/IconButton.styles.js +12 -0
- package/es/components/IconButton/IconButton.styles.js.map +1 -0
- package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/es/components/IconButton/IconButton.tokens.js +28 -0
- package/es/components/IconButton/IconButton.tokens.js.map +1 -0
- package/es/components/TextField/TextField.js +2 -6
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/index.css +2 -25
- package/es/index.js +2 -8
- package/es/index.js.map +1 -1
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -4
- package/styled-components/cjs/components/Button/Button.styles.js +10 -2
- package/styled-components/cjs/components/IconButton/IconButton.js +47 -0
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +12 -0
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +31 -0
- package/styled-components/cjs/components/IconButton/index.js +25 -0
- package/styled-components/cjs/components/TextField/TextField.js +2 -6
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +46 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +69 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +46 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +69 -0
- package/styled-components/cjs/hooks/index.js +1 -8
- package/styled-components/cjs/index.js +11 -11
- package/styled-components/cjs/utils/index.js +0 -7
- package/styled-components/es/components/Button/Button.styles.js +10 -2
- package/styled-components/es/components/IconButton/IconButton.js +41 -0
- package/styled-components/es/components/IconButton/IconButton.styles.js +6 -0
- package/styled-components/es/components/IconButton/IconButton.tokens.js +25 -0
- package/styled-components/es/components/IconButton/index.js +2 -0
- package/styled-components/es/components/TextField/TextField.js +2 -6
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +40 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +69 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +40 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +69 -0
- package/styled-components/es/hooks/index.js +1 -2
- package/styled-components/es/index.js +2 -2
- package/styled-components/es/utils/index.js +0 -1
- package/types/components/Button/Button.styles.d.ts +1 -0
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.d.ts +35 -0
- package/types/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.styles.d.ts +3 -0
- package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.tokens.d.ts +26 -0
- package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
- package/types/components/IconButton/index.d.ts +3 -0
- package/types/components/IconButton/index.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +39 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +33 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +39 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +33 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/hooks/index.d.ts +0 -1
- package/types/hooks/index.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/utils/index.d.ts +0 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Slider/Slider.css +0 -69
- package/cjs/components/Slider/Slider.js +0 -58
- package/cjs/components/Slider/Slider.js.map +0 -1
- package/cjs/components/Slider/Slider.tokens.js +0 -79
- package/cjs/components/Slider/Slider.tokens.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.css +0 -62
- package/cjs/components/Slider/components/Double/Double.js +0 -274
- package/cjs/components/Slider/components/Double/Double.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.styles.js +0 -61
- package/cjs/components/Slider/components/Double/Double.styles.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +0 -7
- package/cjs/components/Slider/components/Single/Single.css +0 -16
- package/cjs/components/Slider/components/Single/Single.js +0 -160
- package/cjs/components/Slider/components/Single/Single.js.map +0 -1
- package/cjs/components/Slider/components/Single/Single.styles.js +0 -45
- package/cjs/components/Slider/components/Single/Single.styles.js.map +0 -1
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +0 -4
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +0 -82
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +0 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +0 -33
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +0 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/cjs/components/Slider/ui/Handle/Handle.css +0 -4
- package/cjs/components/Slider/ui/Handle/Handle.js +0 -174
- package/cjs/components/Slider/ui/Handle/Handle.js.map +0 -1
- package/cjs/components/Slider/ui/Handle/Handle.styles.js +0 -21
- package/cjs/components/Slider/ui/Handle/Handle.styles.js.map +0 -1
- package/cjs/components/Slider/ui/Handle/Handle.styles_16a5sl.css +0 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.css +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.js +0 -31
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +0 -15
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_zwgsh8.css +0 -1
- package/cjs/components/Slider/utils/index.js +0 -56
- package/cjs/components/Slider/utils/index.js.map +0 -1
- package/cjs/components/Slider/variations/_disabled/base.js +0 -9
- package/cjs/components/Slider/variations/_disabled/base.js.map +0 -1
- package/cjs/components/Slider/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/Slider/variations/_size/base.js +0 -9
- package/cjs/components/Slider/variations/_size/base.js.map +0 -1
- package/cjs/components/Slider/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/Slider/variations/_view/base.js +0 -9
- package/cjs/components/Slider/variations/_view/base.js.map +0 -1
- package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/cjs/hooks/useIsomorphicLayoutEffect.js +0 -15
- package/cjs/hooks/useIsomorphicLayoutEffect.js.map +0 -1
- package/cjs/utils/canUseDOM.js +0 -12
- package/cjs/utils/canUseDOM.js.map +0 -1
- package/es/components/Slider/Slider.css +0 -69
- package/es/components/Slider/Slider.js +0 -53
- package/es/components/Slider/Slider.js.map +0 -1
- package/es/components/Slider/Slider.tokens.js +0 -74
- package/es/components/Slider/Slider.tokens.js.map +0 -1
- package/es/components/Slider/components/Double/Double.css +0 -62
- package/es/components/Slider/components/Double/Double.js +0 -270
- package/es/components/Slider/components/Double/Double.js.map +0 -1
- package/es/components/Slider/components/Double/Double.styles.js +0 -51
- package/es/components/Slider/components/Double/Double.styles.js.map +0 -1
- package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +0 -7
- package/es/components/Slider/components/Single/Single.css +0 -16
- package/es/components/Slider/components/Single/Single.js +0 -156
- package/es/components/Slider/components/Single/Single.js.map +0 -1
- package/es/components/Slider/components/Single/Single.styles.js +0 -36
- package/es/components/Slider/components/Single/Single.styles.js.map +0 -1
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.css +0 -4
- package/es/components/Slider/components/SliderBase/SliderBase.js +0 -78
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +0 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +0 -26
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +0 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/es/components/Slider/ui/Handle/Handle.css +0 -4
- package/es/components/Slider/ui/Handle/Handle.js +0 -170
- package/es/components/Slider/ui/Handle/Handle.js.map +0 -1
- package/es/components/Slider/ui/Handle/Handle.styles.js +0 -16
- package/es/components/Slider/ui/Handle/Handle.styles.js.map +0 -1
- package/es/components/Slider/ui/Handle/Handle.styles_16a5sl.css +0 -2
- package/es/components/Slider/ui/Thumb/Thumb.css +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.js +0 -27
- package/es/components/Slider/ui/Thumb/Thumb.js.map +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +0 -11
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_zwgsh8.css +0 -1
- package/es/components/Slider/utils/index.js +0 -50
- package/es/components/Slider/utils/index.js.map +0 -1
- package/es/components/Slider/variations/_disabled/base.js +0 -5
- package/es/components/Slider/variations/_disabled/base.js.map +0 -1
- package/es/components/Slider/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/Slider/variations/_size/base.js +0 -5
- package/es/components/Slider/variations/_size/base.js.map +0 -1
- package/es/components/Slider/variations/_size/base_x642ct.css +0 -1
- package/es/components/Slider/variations/_view/base.js +0 -5
- package/es/components/Slider/variations/_view/base.js.map +0 -1
- package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/es/hooks/useIsomorphicLayoutEffect.js +0 -11
- package/es/hooks/useIsomorphicLayoutEffect.js.map +0 -1
- package/es/utils/canUseDOM.js +0 -8
- package/es/utils/canUseDOM.js.map +0 -1
- package/styled-components/cjs/components/Slider/Slider.js +0 -57
- package/styled-components/cjs/components/Slider/Slider.tokens.js +0 -77
- package/styled-components/cjs/components/Slider/Slider.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/Double/Double.js +0 -286
- package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +0 -36
- package/styled-components/cjs/components/Slider/components/Double/Double.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/Single/Single.js +0 -172
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +0 -27
- package/styled-components/cjs/components/Slider/components/Single/Single.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +0 -83
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +0 -21
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/index.js +0 -27
- package/styled-components/cjs/components/Slider/index.js +0 -32
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.js +0 -183
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.styles.js +0 -15
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.types.js +0 -5
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +0 -32
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +0 -12
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +0 -5
- package/styled-components/cjs/components/Slider/ui/index.js +0 -63
- package/styled-components/cjs/components/Slider/utils/index.js +0 -55
- package/styled-components/cjs/components/Slider/variations/_disabled/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +0 -4
- package/styled-components/cjs/components/Slider/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Slider/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +0 -29
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +0 -131
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +0 -29
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +0 -131
- package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +0 -12
- package/styled-components/cjs/utils/canUseDOM.js +0 -11
- package/styled-components/es/components/Slider/Slider.js +0 -48
- package/styled-components/es/components/Slider/Slider.tokens.js +0 -71
- package/styled-components/es/components/Slider/Slider.types.js +0 -1
- package/styled-components/es/components/Slider/components/Double/Double.js +0 -278
- package/styled-components/es/components/Slider/components/Double/Double.styles.js +0 -29
- package/styled-components/es/components/Slider/components/Double/Double.types.js +0 -1
- package/styled-components/es/components/Slider/components/Single/Single.js +0 -164
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +0 -20
- package/styled-components/es/components/Slider/components/Single/Single.types.js +0 -1
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +0 -74
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +0 -14
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +0 -1
- package/styled-components/es/components/Slider/components/index.js +0 -3
- package/styled-components/es/components/Slider/index.js +0 -3
- package/styled-components/es/components/Slider/ui/Handle/Handle.js +0 -174
- package/styled-components/es/components/Slider/ui/Handle/Handle.styles.js +0 -8
- package/styled-components/es/components/Slider/ui/Handle/Handle.types.js +0 -1
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +0 -25
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +0 -5
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +0 -1
- package/styled-components/es/components/Slider/ui/index.js +0 -5
- package/styled-components/es/components/Slider/utils/index.js +0 -47
- package/styled-components/es/components/Slider/variations/_disabled/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_disabled/tokens.json +0 -4
- package/styled-components/es/components/Slider/variations/_size/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Slider/variations/_view/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +0 -23
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +0 -131
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +0 -23
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +0 -5
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +0 -131
- package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +0 -7
- package/styled-components/es/utils/canUseDOM.js +0 -5
- package/types/components/Slider/Slider.d.ts +0 -31
- package/types/components/Slider/Slider.d.ts.map +0 -1
- package/types/components/Slider/Slider.tokens.d.ts +0 -72
- package/types/components/Slider/Slider.tokens.d.ts.map +0 -1
- package/types/components/Slider/Slider.types.d.ts +0 -3
- package/types/components/Slider/Slider.types.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.d.ts +0 -4
- package/types/components/Slider/components/Double/Double.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +0 -43
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.types.d.ts +0 -60
- package/types/components/Slider/components/Double/Double.types.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.d.ts +0 -4
- package/types/components/Slider/components/Single/Single.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts +0 -8
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.types.d.ts +0 -62
- package/types/components/Slider/components/Single/Single.types.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts +0 -4
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +0 -6
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +0 -45
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +0 -1
- package/types/components/Slider/components/index.d.ts +0 -6
- package/types/components/Slider/components/index.d.ts.map +0 -1
- package/types/components/Slider/index.d.ts +0 -6
- package/types/components/Slider/index.d.ts.map +0 -1
- package/types/components/Slider/ui/Handle/Handle.d.ts +0 -9
- package/types/components/Slider/ui/Handle/Handle.d.ts.map +0 -1
- package/types/components/Slider/ui/Handle/Handle.styles.d.ts +0 -4
- package/types/components/Slider/ui/Handle/Handle.styles.d.ts.map +0 -1
- package/types/components/Slider/ui/Handle/Handle.types.d.ts +0 -24
- package/types/components/Slider/ui/Handle/Handle.types.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +0 -4
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +0 -5
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +0 -12
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +0 -1
- package/types/components/Slider/ui/index.d.ts +0 -6
- package/types/components/Slider/ui/index.d.ts.map +0 -1
- package/types/components/Slider/utils/index.d.ts +0 -33
- package/types/components/Slider/utils/index.d.ts.map +0 -1
- package/types/components/Slider/variations/_disabled/base.d.ts +0 -2
- package/types/components/Slider/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/Slider/variations/_size/base.d.ts +0 -2
- package/types/components/Slider/variations/_size/base.d.ts.map +0 -1
- package/types/components/Slider/variations/_view/base.d.ts +0 -2
- package/types/components/Slider/variations/_view/base.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +0 -22
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +0 -17
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +0 -22
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +0 -17
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +0 -1
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +0 -6
- package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +0 -1
- package/types/utils/canUseDOM.d.ts +0 -6
- package/types/utils/canUseDOM.d.ts.map +0 -1
package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
5
|
+
import { mergeConfig } from '../../../../engines';
|
6
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
8
|
+
|
9
|
+
import { config } from './IconButton.config';
|
10
|
+
import { IconButton } from './IconButton';
|
11
|
+
|
12
|
+
const meta: Meta<typeof IconButton> = {
|
13
|
+
title: 'plasma_web/IconButton',
|
14
|
+
decorators: [WithTheme],
|
15
|
+
component: IconButton,
|
16
|
+
argTypes: {
|
17
|
+
...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
|
18
|
+
pin: {
|
19
|
+
options: [
|
20
|
+
'square-square',
|
21
|
+
'square-clear',
|
22
|
+
'clear-square',
|
23
|
+
'clear-clear',
|
24
|
+
'clear-circle',
|
25
|
+
'circle-clear',
|
26
|
+
'circle-circle',
|
27
|
+
'',
|
28
|
+
],
|
29
|
+
control: {
|
30
|
+
type: 'select',
|
31
|
+
},
|
32
|
+
table: { defaultValue: { summary: 'bottom' } },
|
33
|
+
},
|
34
|
+
},
|
35
|
+
};
|
36
|
+
|
37
|
+
export default meta;
|
38
|
+
|
39
|
+
const getSizeForIcon = (size) => {
|
40
|
+
if (size === 'mr') {
|
41
|
+
return 'm';
|
42
|
+
}
|
43
|
+
if (size === 'lr') {
|
44
|
+
return 'l';
|
45
|
+
}
|
46
|
+
if (size === 'sr') {
|
47
|
+
return 's';
|
48
|
+
}
|
49
|
+
if (size === 'xsr') {
|
50
|
+
return 'xs';
|
51
|
+
}
|
52
|
+
return size;
|
53
|
+
};
|
54
|
+
|
55
|
+
export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
56
|
+
args: {
|
57
|
+
children: <IconChevronLeft />,
|
58
|
+
view: 'default',
|
59
|
+
size: 'm',
|
60
|
+
disabled: false,
|
61
|
+
focused: true,
|
62
|
+
isLoading: false,
|
63
|
+
},
|
64
|
+
render: (args) => (
|
65
|
+
<IconButton {...args}>
|
66
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
67
|
+
</IconButton>
|
68
|
+
),
|
69
|
+
};
|
@@ -15,12 +15,6 @@ Object.defineProperty(exports, "useForceUpdate", {
|
|
15
15
|
return _useForceUpdate.useForceUpdate;
|
16
16
|
}
|
17
17
|
});
|
18
|
-
Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
|
22
|
-
}
|
23
|
-
});
|
24
18
|
Object.defineProperty(exports, "usePreviousValue", {
|
25
19
|
enumerable: true,
|
26
20
|
get: function get() {
|
@@ -36,5 +30,4 @@ Object.defineProperty(exports, "useUniqId", {
|
|
36
30
|
var _useUniqId = /*#__PURE__*/require("./useUniqId");
|
37
31
|
var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
|
38
32
|
var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
|
39
|
-
var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
|
40
|
-
var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
|
33
|
+
var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
|
@@ -58,6 +58,17 @@ Object.keys(_Button).forEach(function (key) {
|
|
58
58
|
}
|
59
59
|
});
|
60
60
|
});
|
61
|
+
var _IconButton = /*#__PURE__*/require("./components/IconButton");
|
62
|
+
Object.keys(_IconButton).forEach(function (key) {
|
63
|
+
if (key === "default" || key === "__esModule") return;
|
64
|
+
if (key in exports && exports[key] === _IconButton[key]) return;
|
65
|
+
Object.defineProperty(exports, key, {
|
66
|
+
enumerable: true,
|
67
|
+
get: function get() {
|
68
|
+
return _IconButton[key];
|
69
|
+
}
|
70
|
+
});
|
71
|
+
});
|
61
72
|
var _ButtonGroup = /*#__PURE__*/require("./components/ButtonGroup");
|
62
73
|
Object.keys(_ButtonGroup).forEach(function (key) {
|
63
74
|
if (key === "default" || key === "__esModule") return;
|
@@ -497,15 +508,4 @@ Object.keys(_Toolbar).forEach(function (key) {
|
|
497
508
|
return _Toolbar[key];
|
498
509
|
}
|
499
510
|
});
|
500
|
-
});
|
501
|
-
var _Slider = /*#__PURE__*/require("./components/Slider");
|
502
|
-
Object.keys(_Slider).forEach(function (key) {
|
503
|
-
if (key === "default" || key === "__esModule") return;
|
504
|
-
if (key in exports && exports[key] === _Slider[key]) return;
|
505
|
-
Object.defineProperty(exports, key, {
|
506
|
-
enumerable: true,
|
507
|
-
get: function get() {
|
508
|
-
return _Slider[key];
|
509
|
-
}
|
510
|
-
});
|
511
511
|
});
|
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "IS_REACT_18", {
|
|
9
9
|
return _react.IS_REACT_18;
|
10
10
|
}
|
11
11
|
});
|
12
|
-
Object.defineProperty(exports, "canUseDOM", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _canUseDOM.canUseDOM;
|
16
|
-
}
|
17
|
-
});
|
18
12
|
exports.cx = exports.composableStyle = void 0;
|
19
13
|
Object.defineProperty(exports, "extractTextFrom", {
|
20
14
|
enumerable: true,
|
@@ -40,7 +34,6 @@ Object.defineProperty(exports, "safeUseId", {
|
|
40
34
|
return _react.safeUseId;
|
41
35
|
}
|
42
36
|
});
|
43
|
-
var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
|
44
37
|
var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
|
45
38
|
var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
|
46
39
|
var _react = /*#__PURE__*/require("./react");
|
@@ -2,7 +2,7 @@ var _templateObject;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
3
3
|
import { css } from 'styled-components';
|
4
4
|
import styled from 'styled-components';
|
5
|
-
import { applyEllipsis } from '../../mixins';
|
5
|
+
import { applyEllipsis, addFocus } from '../../mixins';
|
6
6
|
import { component, mergeConfig } from '../../engines';
|
7
7
|
import { spinnerConfig, spinnerTokens } from '../Spinner';
|
8
8
|
import { classes, tokens } from './Button.tokens';
|
@@ -31,4 +31,12 @@ export var Loader = /*#__PURE__*/styled.div.withConfig({
|
|
31
31
|
})(["position:absolute;"]);
|
32
32
|
export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
33
33
|
componentId: "plasma-new-hope__sc-9d9bqj-3"
|
34
|
-
})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
|
34
|
+
})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
|
35
|
+
|
36
|
+
// INFO: Для возможности переиспользования стилей в других компонентах
|
37
|
+
export var baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat(addFocus({
|
38
|
+
outlineOffset: '-0.125rem',
|
39
|
+
outlineSize: 'var(--plasma_private-btn-outline-size)',
|
40
|
+
outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
|
41
|
+
outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
|
42
|
+
}), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: auto;\n }\n");
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import { buttonRoot } from '../Button';
|
2
|
+
import { base as viewCSS } from '../Button/variations/_view/base';
|
3
|
+
import { base as sizeCSS } from '../Button/variations/_size/base';
|
4
|
+
import { base as disabledCSS } from '../Button/variations/_disabled/base';
|
5
|
+
import { base as focusedCSS } from '../Button/variations/_focused/base';
|
6
|
+
import { base as blurredCSS } from '../Button/variations/_blurred/base';
|
7
|
+
import { base as stretchingCSS } from '../Button/variations/_stretching/base';
|
8
|
+
import { base } from './IconButton.styles';
|
9
|
+
export var iconButtonRoot = buttonRoot;
|
10
|
+
export var iconButtonConfig = {
|
11
|
+
name: 'IconButton',
|
12
|
+
tag: 'button',
|
13
|
+
layout: iconButtonRoot,
|
14
|
+
base: base,
|
15
|
+
variations: {
|
16
|
+
view: {
|
17
|
+
css: viewCSS
|
18
|
+
},
|
19
|
+
size: {
|
20
|
+
css: sizeCSS
|
21
|
+
},
|
22
|
+
disabled: {
|
23
|
+
css: disabledCSS,
|
24
|
+
attrs: true
|
25
|
+
},
|
26
|
+
focused: {
|
27
|
+
css: focusedCSS
|
28
|
+
},
|
29
|
+
blurred: {
|
30
|
+
css: blurredCSS
|
31
|
+
},
|
32
|
+
stretching: {
|
33
|
+
css: stretchingCSS
|
34
|
+
}
|
35
|
+
},
|
36
|
+
defaults: {
|
37
|
+
view: 'secondary',
|
38
|
+
size: 'm',
|
39
|
+
stretching: 'fixed'
|
40
|
+
}
|
41
|
+
};
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { buttonTokens } from '../Button';
|
3
|
+
import { baseContent as buttonBase } from '../Button/Button.styles';
|
4
|
+
import { tokens } from './IconButton.tokens';
|
5
|
+
export var mappingOverride = /*#__PURE__*/"\n ".concat(buttonTokens.buttonPadding, ": 0;\n\n ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
|
6
|
+
export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);
|
@@ -0,0 +1,25 @@
|
|
1
|
+
export var tokens = {
|
2
|
+
iconButtonColor: '--plasma-icon-button-color',
|
3
|
+
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
4
|
+
iconButtonColorHover: '--plasma-icon-button-color-hover',
|
5
|
+
iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
|
6
|
+
iconButtonColorActive: '--plasma-icon-button-color-active',
|
7
|
+
iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
|
8
|
+
iconButtonScaleHover: '--plasma-icon-button-scale-hover',
|
9
|
+
iconButtonScaleActive: '---plasma-icon-button-scale-active',
|
10
|
+
iconButtonHeight: '--plasma-icon-button-height',
|
11
|
+
iconButtonWidth: '--plasma-icon-button-width',
|
12
|
+
iconButtonPadding: '--plasma-icon-button-padding',
|
13
|
+
iconButtonRadius: '--plasma-icon-button-radius',
|
14
|
+
iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
|
15
|
+
iconButtonFontFamily: '--plasma-icon-button-font-family',
|
16
|
+
iconButtonFontSize: '--plasma-icon-button-font-size',
|
17
|
+
iconButtonFontStyle: '--plasma-icon-button-font-style',
|
18
|
+
iconButtonFontWeight: '--plasma-icon-button-font-weight',
|
19
|
+
iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
|
20
|
+
iconButtonLineHeight: '--plasma-icon-button-line-height',
|
21
|
+
iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
|
22
|
+
iconButtonFocusColor: '--plasma-icon-button-focus-color',
|
23
|
+
iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
|
24
|
+
iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
|
25
|
+
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "
|
1
|
+
var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -25,8 +25,6 @@ export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
|
|
25
25
|
export var textFieldRoot = function textFieldRoot(Root) {
|
26
26
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
27
27
|
var id = _ref.id,
|
28
|
-
className = _ref.className,
|
29
|
-
style = _ref.style,
|
30
28
|
contentLeft = _ref.contentLeft,
|
31
29
|
contentRight = _ref.contentRight,
|
32
30
|
label = _ref.label,
|
@@ -142,9 +140,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
142
140
|
disabled: disabled,
|
143
141
|
readOnly: !disabled && readOnly,
|
144
142
|
labelPlacement: innerLabelPlacementValue,
|
145
|
-
onClick: handleInputFocus
|
146
|
-
className: className,
|
147
|
-
style: style
|
143
|
+
onClick: handleInputFocus
|
148
144
|
}, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
|
149
145
|
id: labelId,
|
150
146
|
htmlFor: id
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { iconButtonTokens } from '../../../../components/IconButton';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
focused: 'true',
|
7
|
+
size: 'm'
|
8
|
+
},
|
9
|
+
variations: {
|
10
|
+
view: {
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
12
|
+
primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
13
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
14
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
15
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
16
|
+
success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
17
|
+
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
18
|
+
critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
19
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
20
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
21
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
|
22
|
+
},
|
23
|
+
size: {
|
24
|
+
l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
25
|
+
lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
26
|
+
m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
27
|
+
mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
28
|
+
s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
29
|
+
sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
30
|
+
xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
31
|
+
xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
|
32
|
+
},
|
33
|
+
disabled: {
|
34
|
+
"true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
|
35
|
+
},
|
36
|
+
focused: {
|
37
|
+
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
|
38
|
+
}
|
39
|
+
}
|
40
|
+
};
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
2
|
+
import { component, mergeConfig } from '../../../../engines';
|
3
|
+
import { config } from './IconButton.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
|
5
|
+
export var IconButton = /*#__PURE__*/component(mergedConfig);
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
5
|
+
import { mergeConfig } from '../../../../engines';
|
6
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
8
|
+
|
9
|
+
import { config } from './IconButton.config';
|
10
|
+
import { IconButton } from './IconButton';
|
11
|
+
|
12
|
+
const meta: Meta<typeof IconButton> = {
|
13
|
+
title: 'plasma_b2c/IconButton',
|
14
|
+
decorators: [WithTheme],
|
15
|
+
component: IconButton,
|
16
|
+
argTypes: {
|
17
|
+
...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
|
18
|
+
pin: {
|
19
|
+
options: [
|
20
|
+
'square-square',
|
21
|
+
'square-clear',
|
22
|
+
'clear-square',
|
23
|
+
'clear-clear',
|
24
|
+
'clear-circle',
|
25
|
+
'circle-clear',
|
26
|
+
'circle-circle',
|
27
|
+
'',
|
28
|
+
],
|
29
|
+
control: {
|
30
|
+
type: 'select',
|
31
|
+
},
|
32
|
+
table: { defaultValue: { summary: 'bottom' } },
|
33
|
+
},
|
34
|
+
},
|
35
|
+
};
|
36
|
+
|
37
|
+
export default meta;
|
38
|
+
|
39
|
+
const getSizeForIcon = (size) => {
|
40
|
+
if (size === 'mr') {
|
41
|
+
return 'm';
|
42
|
+
}
|
43
|
+
if (size === 'lr') {
|
44
|
+
return 'l';
|
45
|
+
}
|
46
|
+
if (size === 'sr') {
|
47
|
+
return 's';
|
48
|
+
}
|
49
|
+
if (size === 'xsr') {
|
50
|
+
return 'xs';
|
51
|
+
}
|
52
|
+
return size;
|
53
|
+
};
|
54
|
+
|
55
|
+
export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
56
|
+
args: {
|
57
|
+
children: <IconChevronLeft />,
|
58
|
+
view: 'default',
|
59
|
+
size: 'm',
|
60
|
+
disabled: false,
|
61
|
+
focused: true,
|
62
|
+
isLoading: false,
|
63
|
+
},
|
64
|
+
render: (args) => (
|
65
|
+
<IconButton {...args}>
|
66
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
67
|
+
</IconButton>
|
68
|
+
),
|
69
|
+
};
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { iconButtonTokens } from '../../../../components/IconButton';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
focused: 'true',
|
7
|
+
size: 'm'
|
8
|
+
},
|
9
|
+
variations: {
|
10
|
+
view: {
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
12
|
+
primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
13
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
14
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
15
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
16
|
+
success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
17
|
+
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
18
|
+
critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
19
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
20
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
|
21
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
|
22
|
+
},
|
23
|
+
size: {
|
24
|
+
l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
25
|
+
lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
26
|
+
m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
27
|
+
mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
28
|
+
s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
29
|
+
sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
30
|
+
xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
31
|
+
xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
|
32
|
+
},
|
33
|
+
disabled: {
|
34
|
+
"true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
|
35
|
+
},
|
36
|
+
focused: {
|
37
|
+
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
|
38
|
+
}
|
39
|
+
}
|
40
|
+
};
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
2
|
+
import { component, mergeConfig } from '../../../../engines';
|
3
|
+
import { config } from './IconButton.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
|
5
|
+
export var IconButton = /*#__PURE__*/component(mergedConfig);
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
5
|
+
import { mergeConfig } from '../../../../engines';
|
6
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
8
|
+
|
9
|
+
import { config } from './IconButton.config';
|
10
|
+
import { IconButton } from './IconButton';
|
11
|
+
|
12
|
+
const meta: Meta<typeof IconButton> = {
|
13
|
+
title: 'plasma_web/IconButton',
|
14
|
+
decorators: [WithTheme],
|
15
|
+
component: IconButton,
|
16
|
+
argTypes: {
|
17
|
+
...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
|
18
|
+
pin: {
|
19
|
+
options: [
|
20
|
+
'square-square',
|
21
|
+
'square-clear',
|
22
|
+
'clear-square',
|
23
|
+
'clear-clear',
|
24
|
+
'clear-circle',
|
25
|
+
'circle-clear',
|
26
|
+
'circle-circle',
|
27
|
+
'',
|
28
|
+
],
|
29
|
+
control: {
|
30
|
+
type: 'select',
|
31
|
+
},
|
32
|
+
table: { defaultValue: { summary: 'bottom' } },
|
33
|
+
},
|
34
|
+
},
|
35
|
+
};
|
36
|
+
|
37
|
+
export default meta;
|
38
|
+
|
39
|
+
const getSizeForIcon = (size) => {
|
40
|
+
if (size === 'mr') {
|
41
|
+
return 'm';
|
42
|
+
}
|
43
|
+
if (size === 'lr') {
|
44
|
+
return 'l';
|
45
|
+
}
|
46
|
+
if (size === 'sr') {
|
47
|
+
return 's';
|
48
|
+
}
|
49
|
+
if (size === 'xsr') {
|
50
|
+
return 'xs';
|
51
|
+
}
|
52
|
+
return size;
|
53
|
+
};
|
54
|
+
|
55
|
+
export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
56
|
+
args: {
|
57
|
+
children: <IconChevronLeft />,
|
58
|
+
view: 'default',
|
59
|
+
size: 'm',
|
60
|
+
disabled: false,
|
61
|
+
focused: true,
|
62
|
+
isLoading: false,
|
63
|
+
},
|
64
|
+
render: (args) => (
|
65
|
+
<IconButton {...args}>
|
66
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
67
|
+
</IconButton>
|
68
|
+
),
|
69
|
+
};
|
@@ -1,5 +1,4 @@
|
|
1
1
|
export { useUniqId } from './useUniqId';
|
2
2
|
export { usePreviousValue } from './usePreviousValue';
|
3
3
|
export { useForceUpdate } from './useForceUpdate';
|
4
|
-
export { useDidMountEffect } from './useDidMountEffect';
|
5
|
-
export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
4
|
+
export { useDidMountEffect } from './useDidMountEffect';
|
@@ -5,6 +5,7 @@ export * from './engines';
|
|
5
5
|
export * from './hooks';
|
6
6
|
export * from './utils';
|
7
7
|
export * from './components/Button';
|
8
|
+
export * from './components/IconButton';
|
8
9
|
export * from './components/ButtonGroup';
|
9
10
|
export * from './components/Chip';
|
10
11
|
export * from './components/Cell';
|
@@ -44,5 +45,4 @@ export * from './components/Grid';
|
|
44
45
|
export * from './components/Progress';
|
45
46
|
export * from './components/Select';
|
46
47
|
export * from './components/Divider';
|
47
|
-
export * from './components/Toolbar';
|
48
|
-
export * from './components/Slider';
|
48
|
+
export * from './components/Toolbar';
|
@@ -21,4 +21,5 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
|
|
21
21
|
size?: undefined;
|
22
22
|
view?: string | undefined;
|
23
23
|
} & import("react").RefAttributes<HTMLDivElement>))>;
|
24
|
+
export declare const baseContent: string;
|
24
25
|
//# sourceMappingURL=Button.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC"}
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
|