@salutejs/plasma-new-hope 0.165.1-dev.0 → 0.166.0-canary.1392.11342835439.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Attach/Attach.js +8 -17
- package/cjs/components/Attach/Attach.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +1 -1
- package/cjs/components/Segment/tokens.js +15 -1
- package/cjs/components/Segment/tokens.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +13 -7
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +180 -88
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +37 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_1tb4sy2.css +8 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +9 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +18 -9
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +30 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_13rhpr7.css +4 -0
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js.map +1 -0
- package/cjs/index.css +19 -11
- package/emotion/cjs/components/Attach/Attach.js +8 -17
- package/emotion/cjs/components/Attach/Attach.template-doc.mdx +0 -69
- package/emotion/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- package/emotion/cjs/components/Segment/tokens.js +15 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +174 -85
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +29 -29
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +18 -9
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +20 -6
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/index.js +28 -0
- package/emotion/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +124 -42
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +125 -42
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/components/Attach/Attach.js +8 -17
- package/emotion/es/components/Attach/Attach.template-doc.mdx +0 -69
- package/emotion/es/components/Segment/Segment.template-doc.mdx +3 -3
- package/emotion/es/components/Segment/tokens.js +15 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +177 -88
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +29 -29
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.js +19 -10
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +20 -6
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/emotion/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +15 -0
- package/emotion/es/components/_Icon/index.js +4 -0
- package/emotion/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +124 -42
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/examples/plasma_web/components/Segment/Segment.stories.tsx +125 -42
- package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
- package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/es/components/Attach/Attach.js +8 -17
- package/es/components/Attach/Attach.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +1 -1
- package/es/components/Segment/tokens.js +15 -1
- package/es/components/Segment/tokens.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +13 -7
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +183 -92
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +34 -2
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_1tb4sy2.css +8 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +5 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
- package/es/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js +19 -10
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +29 -2
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_13rhpr7.css +4 -0
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js.map +1 -0
- package/es/index.css +19 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Attach/Attach.js +8 -17
- package/styled-components/cjs/components/Attach/Attach.template-doc.mdx +0 -69
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Segment/tokens.js +15 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +174 -85
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +18 -6
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +18 -9
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +16 -4
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/index.js +28 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +124 -42
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +125 -42
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/components/Attach/Attach.js +8 -17
- package/styled-components/es/components/Attach/Attach.template-doc.mdx +0 -69
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +3 -3
- package/styled-components/es/components/Segment/tokens.js +15 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +177 -88
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +18 -6
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.js +19 -10
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +16 -4
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/index.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +124 -42
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx +125 -42
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/types/components/Attach/Attach.d.ts.map +1 -1
- package/types/components/Attach/Attach.types.d.ts +0 -4
- package/types/components/Attach/Attach.types.d.ts.map +1 -1
- package/types/components/Segment/tokens.d.ts +14 -0
- package/types/components/Segment/tokens.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +10 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +12 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +19 -2
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts +2 -0
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts.map +1 -0
- package/types/components/Segment/ui/SegmentGroup/variations/_pilled/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_size/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +8 -2
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +7 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +14 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_pilled/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureDownWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureDownWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureLeftWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureLeftWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureRightWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureRightWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureUpWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureUpWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureDownWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureDownWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureLeftWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureLeftWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureRightWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureRightWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureUpWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureUpWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/index.d.ts +4 -0
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +10 -1
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/Segment.d.ts +13 -1
- package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +6 -0
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentItem.config.d.ts.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
@@ -1,23 +1,56 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
4
5
|
|
5
6
|
import { segmentGroupConfig } from '../../../../components/Segment';
|
6
7
|
import { mergeConfig } from '../../../../engines';
|
7
8
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
9
|
import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
|
10
|
+
import { Counter } from '../Counter/Counter';
|
11
|
+
import { IconMic } from '../../../../components/_Icon';
|
9
12
|
|
10
13
|
import { config } from './SegmentGroup.config';
|
11
14
|
import { SegmentItem, SegmentGroup } from './Segment';
|
12
15
|
|
13
|
-
const
|
16
|
+
const contentLeftOptions = ['none', 'icon'];
|
17
|
+
const contentRightOptions = ['none', 'text', 'counter', 'icon'];
|
14
18
|
|
15
|
-
|
16
|
-
|
17
|
-
|
19
|
+
const segmentItemViews = ['default', 'secondary'];
|
20
|
+
type Size = typeof sizes[number];
|
21
|
+
|
22
|
+
type CustomStoryProps = {
|
23
|
+
itemQuantity: number;
|
24
|
+
contentLeft: string;
|
25
|
+
contentRight: string;
|
26
|
+
segmentItemView?: 'default' | 'secondary';
|
27
|
+
clip: boolean;
|
28
|
+
};
|
29
|
+
|
30
|
+
type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
|
31
|
+
|
32
|
+
const sizes = ['xs', 's', 'm', 'l'] as const;
|
33
|
+
|
34
|
+
const getContentLeft = (contentLeftOption: string, size: Size) => {
|
35
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
36
|
+
return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
|
18
37
|
};
|
19
38
|
|
20
|
-
|
39
|
+
const getContentRight = (contentRightOption: string, size: Size) => {
|
40
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
41
|
+
const counterSize = size === 'xs' ? 'xxs' : 'xs';
|
42
|
+
|
43
|
+
switch (contentRightOption) {
|
44
|
+
case 'icon':
|
45
|
+
return <IconMic size={iconSize} color="inherit" />;
|
46
|
+
case 'counter':
|
47
|
+
return <Counter size={counterSize} count={1} view="positive" />;
|
48
|
+
case 'text':
|
49
|
+
return 'Text';
|
50
|
+
default:
|
51
|
+
return undefined;
|
52
|
+
}
|
53
|
+
};
|
21
54
|
|
22
55
|
const meta: Meta<StorySegmentProps> = {
|
23
56
|
title: 'plasma_web/Segment',
|
@@ -25,6 +58,25 @@ const meta: Meta<StorySegmentProps> = {
|
|
25
58
|
component: SegmentGroup,
|
26
59
|
argTypes: {
|
27
60
|
...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
|
61
|
+
...disableProps(['filledBackground', 'view', 'selectionMode']),
|
62
|
+
clip: {
|
63
|
+
control: {
|
64
|
+
type: 'boolean',
|
65
|
+
},
|
66
|
+
if: { arg: 'stretch', truthy: false },
|
67
|
+
},
|
68
|
+
stretch: {
|
69
|
+
control: {
|
70
|
+
type: 'boolean',
|
71
|
+
},
|
72
|
+
if: { arg: 'orientation', eq: 'horizontal' },
|
73
|
+
},
|
74
|
+
orientation: {
|
75
|
+
options: ['horizontal', 'vertical'],
|
76
|
+
control: {
|
77
|
+
type: 'select',
|
78
|
+
},
|
79
|
+
},
|
28
80
|
selectionMode: {
|
29
81
|
options: ['single', 'multiple'],
|
30
82
|
control: {
|
@@ -37,59 +89,90 @@ const meta: Meta<StorySegmentProps> = {
|
|
37
89
|
type: 'select',
|
38
90
|
},
|
39
91
|
},
|
92
|
+
contentLeft: {
|
93
|
+
options: contentLeftOptions,
|
94
|
+
control: {
|
95
|
+
type: 'select',
|
96
|
+
},
|
97
|
+
},
|
98
|
+
contentRight: {
|
99
|
+
options: contentRightOptions,
|
100
|
+
control: {
|
101
|
+
type: 'select',
|
102
|
+
},
|
103
|
+
},
|
40
104
|
},
|
41
105
|
};
|
42
106
|
|
43
107
|
export default meta;
|
44
108
|
|
45
|
-
const StoryDefault = (
|
46
|
-
const
|
109
|
+
const StoryDefault = (props: StorySegmentProps) => {
|
110
|
+
const {
|
111
|
+
clip,
|
112
|
+
disabled,
|
113
|
+
itemQuantity,
|
114
|
+
size,
|
115
|
+
stretch,
|
116
|
+
orientation,
|
117
|
+
|
118
|
+
segmentItemView,
|
119
|
+
contentLeft: contentLeftOption,
|
120
|
+
contentRight: contentRightOption,
|
121
|
+
...args
|
122
|
+
} = props;
|
123
|
+
const items = Array(itemQuantity).fill(0);
|
124
|
+
const isVertical = orientation === 'vertical';
|
125
|
+
|
126
|
+
const style = clip ? { width: isVertical ? 'auto' : '20rem', height: isVertical ? '10rem' : 'auto' } : undefined;
|
47
127
|
|
48
128
|
return (
|
49
|
-
|
50
|
-
<
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
/>
|
76
|
-
))}
|
77
|
-
</SegmentGroup>
|
78
|
-
</SegmentProvider>
|
79
|
-
</>
|
129
|
+
<SegmentProvider>
|
130
|
+
<SegmentGroup
|
131
|
+
stretch={stretch}
|
132
|
+
disabled={disabled}
|
133
|
+
clip={clip}
|
134
|
+
size={size}
|
135
|
+
orientation={orientation}
|
136
|
+
style={style}
|
137
|
+
{...args}
|
138
|
+
>
|
139
|
+
{items.map((_, i) => (
|
140
|
+
<SegmentItem
|
141
|
+
view={segmentItemView}
|
142
|
+
label={`Label ${i}`}
|
143
|
+
value={`label_${i}`}
|
144
|
+
size={size}
|
145
|
+
key={`label_${i}`}
|
146
|
+
contentLeft={getContentLeft(contentLeftOption, size)}
|
147
|
+
contentRight={getContentRight(contentRightOption, size)}
|
148
|
+
{...args}
|
149
|
+
>
|
150
|
+
{`Label${i + 1}`}
|
151
|
+
</SegmentItem>
|
152
|
+
))}
|
153
|
+
</SegmentGroup>
|
154
|
+
</SegmentProvider>
|
80
155
|
);
|
81
156
|
};
|
82
157
|
|
83
158
|
export const Default: StoryObj<StorySegmentProps> = {
|
84
159
|
args: {
|
85
|
-
|
160
|
+
itemQuantity: 8,
|
86
161
|
size: 'xs',
|
87
|
-
segmentItemView: '
|
162
|
+
segmentItemView: 'default',
|
88
163
|
selectionMode: 'single',
|
89
|
-
contentItemsNumber: 11,
|
90
164
|
pilled: false,
|
91
165
|
filledBackground: false,
|
166
|
+
hasBackground: false,
|
92
167
|
disabled: false,
|
168
|
+
stretch: false,
|
169
|
+
clip: false,
|
170
|
+
orientation: 'horizontal',
|
171
|
+
contentRight: 'none',
|
172
|
+
contentLeft: 'none',
|
173
|
+
},
|
174
|
+
argTypes: {
|
175
|
+
...disableProps(['filledBackground', 'view', 'selectionMode']),
|
93
176
|
},
|
94
|
-
render: (args) => <StoryDefault {...args} />,
|
177
|
+
render: (args: StorySegmentProps) => <StoryDefault {...args} />,
|
95
178
|
};
|
@@ -13,23 +13,29 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":
|
17
|
-
filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
|
16
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
|
17
|
+
filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
|
18
18
|
},
|
19
19
|
size: {
|
20
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":
|
20
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;", ":0.25rem 0.75rem;", ":0.75rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
|
21
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;", ":0.5rem 0.875rem;", ":0.875rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;", ":0.75rem 1.25rem;", ":1.25rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
|
23
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;", ":1rem 1.375rem;", ":1.375rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding)
|
24
24
|
},
|
25
25
|
disabled: {
|
26
26
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
|
27
27
|
},
|
28
28
|
pilled: {
|
29
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""
|
29
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
30
|
+
},
|
31
|
+
stretch: {
|
32
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
30
33
|
},
|
31
34
|
filledBackground: {
|
32
35
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
|
36
|
+
},
|
37
|
+
orientation: {
|
38
|
+
vertical: /*#__PURE__*/(0, _styledComponents.css)([""])
|
33
39
|
}
|
34
40
|
}
|
35
41
|
};
|
@@ -13,21 +13,21 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
|
17
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-
|
18
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
|
16
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
|
17
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-card);", ":var(--text-primary-hover);", ":var(--surface-transparent-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
|
18
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor)
|
19
19
|
},
|
20
20
|
size: {
|
21
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
22
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
23
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
24
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
21
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
22
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.5rem 0.5rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
23
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.75rem 0.75rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
24
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":1rem 1rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
|
25
25
|
},
|
26
26
|
disabled: {
|
27
27
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
|
28
28
|
},
|
29
29
|
pilled: {
|
30
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.
|
30
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
|
31
31
|
}
|
32
32
|
}
|
33
33
|
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
var _IconCloseCircleOutli;
|
2
|
-
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"
|
2
|
+
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
|
3
3
|
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); }
|
4
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
5
5
|
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."); }
|
@@ -36,10 +36,6 @@ export var attachRoot = function attachRoot(Root) {
|
|
36
36
|
style = props.style,
|
37
37
|
isLoading = props.isLoading,
|
38
38
|
disabled = props.disabled,
|
39
|
-
id = props.id,
|
40
|
-
name = props.name,
|
41
|
-
onChange = props.onChange,
|
42
|
-
onClear = props.onClear,
|
43
39
|
rest = _objectWithoutProperties(props, _excluded);
|
44
40
|
var innerRef = useRef(null);
|
45
41
|
var ref = useForkRef(outerRef, innerRef);
|
@@ -108,22 +104,16 @@ export var attachRoot = function attachRoot(Root) {
|
|
108
104
|
}
|
109
105
|
inputRef.current.click();
|
110
106
|
};
|
111
|
-
var handleChange = function handleChange(
|
112
|
-
if (!
|
107
|
+
var handleChange = function handleChange() {
|
108
|
+
if (!inputRef.current || !inputRef.current.files) {
|
113
109
|
return;
|
114
110
|
}
|
115
|
-
|
116
|
-
onChange(e);
|
117
|
-
}
|
118
|
-
setFilename(e.target.files[0].name);
|
111
|
+
setFilename(inputRef.current.files[0].name);
|
119
112
|
};
|
120
113
|
var handleClear = function handleClear() {
|
121
114
|
if (!inputRef.current) {
|
122
115
|
return;
|
123
116
|
}
|
124
|
-
if (onClear) {
|
125
|
-
onClear();
|
126
|
-
}
|
127
117
|
inputRef.current.value = '';
|
128
118
|
setFilename('');
|
129
119
|
setTruncatedFilename('');
|
@@ -138,11 +128,12 @@ export var attachRoot = function attachRoot(Root) {
|
|
138
128
|
ref: inputRef,
|
139
129
|
accept: accept,
|
140
130
|
type: "file",
|
141
|
-
id:
|
142
|
-
name:
|
131
|
+
id: "attachHiddenInput",
|
132
|
+
name: "attachHiddenInput",
|
143
133
|
onChange: handleChange
|
144
134
|
}), /*#__PURE__*/React.createElement(StyledHiddenInputHelper, {
|
145
|
-
ref: inputHelperRef
|
135
|
+
ref: inputHelperRef,
|
136
|
+
id: "attachHiddenInputHelper"
|
146
137
|
}, filename), /*#__PURE__*/React.createElement(AttachButton, _extends({
|
147
138
|
buttonType: buttonType,
|
148
139
|
view: view,
|
@@ -61,72 +61,3 @@ export function App() {
|
|
61
61
|
);
|
62
62
|
}
|
63
63
|
```
|
64
|
-
|
65
|
-
### Пример использования в форме
|
66
|
-
|
67
|
-
```tsx live
|
68
|
-
import React, { useState } from 'react';
|
69
|
-
import { Attach, Button } from '@salutejs/{{ package }}';
|
70
|
-
|
71
|
-
function App() {
|
72
|
-
const ids = ['0', '1', '2'];
|
73
|
-
const [isLoading, setIsLoading] = useState(false);
|
74
|
-
const [attachedFiles, setAttachedFiles] = useState([]);
|
75
|
-
|
76
|
-
const handleAttachFile = (e) => {
|
77
|
-
setAttachedFiles((prevAttachedFiles) => [
|
78
|
-
...prevAttachedFiles,
|
79
|
-
{
|
80
|
-
fileData: e.target.files[0],
|
81
|
-
id: e.target.id,
|
82
|
-
},
|
83
|
-
]);
|
84
|
-
};
|
85
|
-
|
86
|
-
const handleAttachClear = (id) => {
|
87
|
-
setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
|
88
|
-
};
|
89
|
-
|
90
|
-
const handleSubmit = (e) => {
|
91
|
-
e.preventDefault();
|
92
|
-
setIsLoading(true);
|
93
|
-
|
94
|
-
const formData = new FormData(e.target);
|
95
|
-
console.log('formData', Object.fromEntries(formData));
|
96
|
-
|
97
|
-
setTimeout(() => {
|
98
|
-
setAttachedFiles([]);
|
99
|
-
setIsLoading(false);
|
100
|
-
}, 2000);
|
101
|
-
};
|
102
|
-
|
103
|
-
return (
|
104
|
-
<>
|
105
|
-
<span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
|
106
|
-
{!isLoading && attachedFiles.length > 0 && (
|
107
|
-
<div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
|
108
|
-
{attachedFiles.map((file) => (
|
109
|
-
<span>{file.fileData.name}</span>
|
110
|
-
))}
|
111
|
-
</div>
|
112
|
-
)}
|
113
|
-
|
114
|
-
{!isLoading && (
|
115
|
-
<form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
|
116
|
-
{ids.map((id) => (
|
117
|
-
<Attach
|
118
|
-
id={id}
|
119
|
-
name={`attach${id}`}
|
120
|
-
text={`Загрузить файл ${id}`}
|
121
|
-
onChange={handleAttachFile}
|
122
|
-
onClear={() => handleAttachClear(id)}
|
123
|
-
/>
|
124
|
-
))}
|
125
|
-
|
126
|
-
<Button type="submit">Отправить</Button>
|
127
|
-
</form>
|
128
|
-
)}
|
129
|
-
</>
|
130
|
-
);
|
131
|
-
}
|
132
|
-
```
|
@@ -21,12 +21,12 @@ import { PropsTable, Description } from '@site/src/components';
|
|
21
21
|
|
22
22
|
### Провайдер контекста
|
23
23
|
|
24
|
-
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
24
|
+
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
27
|
### Выбранные по умолчанию SegmentItem
|
28
28
|
|
29
|
-
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
29
|
+
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
30
|
Оно передается в `SegmentProvider`, в виде массива `value` элеметов.
|
31
31
|
|
32
32
|
```tsx live
|
@@ -42,7 +42,7 @@ export function App() {
|
|
42
42
|
return (
|
43
43
|
<>
|
44
44
|
<div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
|
45
|
-
<SegmentGroup
|
45
|
+
<SegmentGroup hasBackground pilled>
|
46
46
|
{items.map((_, i) => (
|
47
47
|
<SegmentItem
|
48
48
|
label={`Label ${i}`}
|
@@ -2,7 +2,12 @@ export var classes = {
|
|
2
2
|
selectedSegmentItem: 'selected-segment-item',
|
3
3
|
segmentPilled: 'segment-pilled',
|
4
4
|
segmentGroupFilledBackground: 'segment-group-filled-background',
|
5
|
-
segmentStretch: 'segment-stretched'
|
5
|
+
segmentStretch: 'segment-stretched',
|
6
|
+
segmentVertical: 'segment-vertical',
|
7
|
+
segmentArrowPadding: 'segment-arrow-padding',
|
8
|
+
segmentGroupClipScroll: 'segment-group-clip-scroll',
|
9
|
+
segmentXsSize: 'segment-xs-size',
|
10
|
+
segmentAdditionalText: 'segment-additional-text'
|
6
11
|
};
|
7
12
|
export var tokens = {
|
8
13
|
fontFamily: '--plasma-segment-item-font-family',
|
@@ -17,6 +22,8 @@ export var tokens = {
|
|
17
22
|
groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
|
18
23
|
groupWidth: '--plasma-segment-group-width',
|
19
24
|
groupHeight: '--plasma-segment-group-height',
|
25
|
+
groupArrowPadding: '--plasma-segment-group-arrow-padding',
|
26
|
+
groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
|
20
27
|
groupBackgroundColor: '--plasma-segment-group-background-color',
|
21
28
|
groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
|
22
29
|
itemBorderRadius: '--plasma-segment-item-border-radius',
|
@@ -24,14 +31,21 @@ export var tokens = {
|
|
24
31
|
itemWidth: '--plasma-segment-item-width',
|
25
32
|
itemHeight: '--plasma-segment-item-height',
|
26
33
|
itemPadding: '--plasma-segment-item-padding',
|
34
|
+
itemPilledPadding: '--plasma-segment-item-pilled-padding',
|
27
35
|
itemMarginLeft: '--plasma-segment-item-margin-left',
|
36
|
+
itemContentPadding: '--plasma-segment-item-content-padding',
|
37
|
+
itemIconMargin: '--plasma-segment-item-content-icon-margin',
|
28
38
|
itemColor: '--plasma-segment-item-color',
|
29
39
|
itemBackgroundColor: '--plasma-segment-item-background-color',
|
30
40
|
itemColorHover: '--plasma-segment-item-color-hover',
|
31
41
|
itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
|
42
|
+
itemAdditionalColor: '--plasma-segment-item-additional-color',
|
43
|
+
itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
|
32
44
|
itemSelectedColor: '--plasma-segment-item-selected-color',
|
33
45
|
itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
|
34
46
|
itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
|
35
47
|
itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
|
48
|
+
itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
|
49
|
+
itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
|
36
50
|
disabledOpacity: '--plasma-segment-disabled-opacity'
|
37
51
|
};
|