Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@clearkit/one
Advanced tools
@clearkit/one - npm Package Compare versions
Comparing version 1.2.7 to 1.3.0
| { | ||
| "name": "@clearkit/one", | ||
| "version": "1.2.7", | ||
| "version": "1.3.0", | ||
| "description": "ClearKit One", | ||
@@ -5,0 +5,0 @@ "main": "config/index.js", |
@@ -0,1 +1,4 @@ | ||
| import Info from '@clearkit/icons/glyphs/Info'; | ||
| import { CKButton } from '@clearkit/react'; | ||
| import Heading from '../../components/heading'; | ||
@@ -11,23 +14,59 @@ import Subheading from '../../components/subheading'; | ||
| <section className="mb-6"> | ||
| <Subheading>Standard</Subheading> | ||
| <article className="inline-flex items-center mt-2"> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--bottom"> | ||
| Bottom aligned | ||
| <Subheading>Top</Subheading> | ||
| <article className="flex items-center justify-between px-2 mt-2 mb-8 gap-8"> | ||
| <div className="ck-tooltip ck-tooltip--bottom">Bottom aligned</div> | ||
| <div className="ck-tooltip ck-tooltip--bottom-start"> | ||
| Bottom start aligned | ||
| </div> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom end aligned | ||
| </div> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom aligned with more than just a line of text that forces the | ||
| tooltip across multiple lines | ||
| </div> | ||
| </article> | ||
| <Subheading>Top on Hover/Focus</Subheading> | ||
| <article className="flex items-center justify-between px-8 mt-2 gap-8"> | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--top"> | ||
| <div className="ck-tooltip ck-tooltip--bottom"> | ||
| Bottom aligned | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--bottom-start"> | ||
| Bottom start aligned | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--top-start"> | ||
| <div className="ck-tooltip ck-tooltip--bottom-start"> | ||
| Bottom start aligned | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom end aligned | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--top-end"> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom end aligned | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom aligned with more than just a line of text that forces | ||
| the tooltip across multiple lines | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--top-end"> | ||
| <div className="ck-tooltip ck-tooltip--bottom-end"> | ||
| Bottom aligned with more than just a line of text that | ||
| forces the tooltip across multiple lines | ||
| </div> | ||
| </div> | ||
| </div> | ||
@@ -38,21 +77,57 @@ </div> | ||
| <section className="mb-6"> | ||
| <Subheading>Flipped</Subheading> | ||
| <article className="inline-flex items-center mt-2"> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--top">Top aligned</div> | ||
| <Subheading>Bottom</Subheading> | ||
| <article className="flex items-center justify-between px-2 mt-2 mb-8 gap-8"> | ||
| <div className="ck-tooltip ck-tooltip--top">Top aligned</div> | ||
| <div className="ck-tooltip ck-tooltip--top-start"> | ||
| Top start aligned | ||
| </div> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--top-start"> | ||
| Top start aligned | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Top end aligned | ||
| </div> | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Top aligned with more than just a line of text that forces the | ||
| tooltip across multiple lines | ||
| </div> | ||
| </article> | ||
| <Subheading>Bottom on Hover/Focus</Subheading> | ||
| <article className="flex items-center justify-between px-8 pb-20 mt-2 gap-8"> | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--bottom"> | ||
| <div className="ck-tooltip ck-tooltip--top">Bottom aligned</div> | ||
| </div> | ||
| </div> | ||
| <div className="mr-7"> | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Top end aligned | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--bottom-start"> | ||
| <div className="ck-tooltip ck-tooltip--top-start"> | ||
| Bottom start aligned | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--bottom-end"> | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Bottom end aligned | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Top aligned with more than just a line of text that forces the | ||
| tooltip across multiple lines | ||
| <div className="ck-tooltip__target"> | ||
| <CKButton variant="tertiary"> | ||
| <Info /> | ||
| </CKButton> | ||
| <div className="ck-tooltip__container ck-tooltip-container--bottom-end"> | ||
| <div className="ck-tooltip ck-tooltip--top-end"> | ||
| Bottom aligned with more than just a line of text that | ||
| forces the tooltip across multiple lines | ||
| </div> | ||
| </div> | ||
| </div> | ||
@@ -59,0 +134,0 @@ </div> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.1%
6241290
- Number of downloads
- increased by93.13%
253
- Lines of code
- increased by1.31%
11755
No dependency changes